<template>
  <div>
    <p>VUEX:vue的状态管理器，用于管理vue项目中的一些变量</p>
    <p>这些变量会反复出现在多个地方，所以我们需要统一管理</p>
    <p>vuex就是项目中的一个全局变量，可以在项目中的任何地方访问</p>
    <p><mark>在vuex中，所有的修改，最终都要通过mutations来实现。mutations是同步的修改。</mark></p>
    <p>在VUEX中，想要异步的修改数据，需要使用action</p>
    <br>
    <hr>
    <p>
      <mark>{{$store.state.count}}</mark>
      <button @click="add">+1</button>
      <button @click="addAsync">+5</button>
    </p>
    <p>getters计算后的值：{{$store.getters.newCount}}</p>
    <p>getters计算后的值：{{$store.getters.newCount}}</p>
    <p>getters计算后的值：{{$store.getters.newCount}}</p>
    <p>getters计算后的值：{{$store.getters.newCount}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      
    }
  },
  created() {
    console.log(this.$store.state.count)
  },
  methods: {
    add() {
      this.$store.commit('change', {
        result: 666
      })
    },
    addAsync() {
      setTimeout(() => {
        this.$store.dispatch('add5Async');
      }, 3000)
    }
  }
}
</script>

<style scoped>

</style>
